<template>
    <div class="mainDiv">
        <el-row :gutter="20" class="rowHead">
            <!--<el-col :span="16" id="el-col-16">
                <el-tag type="success" size="mini">筛选：</el-tag>
                <el-date-picker size="mini" v-model="page.times" type="daterange" align="right" placeholder="选择日期范围" :picker-options="pickerOptions2" @change="getList">
                </el-date-picker>
                <el-select size="mini" v-model="page.zt" @change="getList" class="ml w200" v-qx="quanxian.status">
                    <el-option v-for="(o,index) in zhuanttai" :label="o.txt" :value="o.val" :key="index"></el-option>
                </el-select>
            </el-col>-->
            <el-button-group>
              <el-button type="primary" @click="add">新增文章</el-button>
              <el-button type="primary" @click="select">选择模板</el-button>
            </el-button-group>
            <!-- <el-button type="success" @click="add" size="small">新增</el-button>
            <el-button type="primary" @click="select" size="small">选择模板</el-button> -->
        </el-row>
        <el-table :data="list" :stripe="true" height="100%">
            <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
            <el-table-column prop="title" label="标题" width="180"></el-table-column>  
            <el-table-column prop="addtime" label="时间" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.addtime|hourTime}}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="作者"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-tooltip content="编辑" placement="top" :open-delay="800">
                            <el-button icon="el-icon-h-edit" type="success" size="mini" @click="edit(scope.row.id)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top" :open-delay="800">
                            <el-button icon="el-icon-delete" type="danger" size="mini" @click="shanchu(scope.row.id)"></el-button>
                        </el-tooltip>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <div class="block center bg-light">
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :page-sizes="[5,15, 30, 50, 100]" :page-size="page.limits" :current-page="page.pages" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import C from '@/common/common.js'

export default {
  data () {
    return {
      list: [],
      page: {
        pages: 1,
        limits: 15
      },
      total: 0,
      zhuanttai: [{
        txt: '显示',
        val: 0
      }, {
        txt: '隐藏',
        val: 1
      }]
    }
  },
  methods: {
    add: async function () {
      await C.openBrowserWindow('/addArticle', {}, { width: 900, height: 710 })
      this.getList()
    },
    // 选择模板
    select: async function () {
      await C.openBrowserWindow('/selectArticle', {}, { width: 900, height: 710 })
      this.getList()
    },
    // 编辑
    edit: async function (id) {
      await C.openBrowserWindow('/addArticle', { id: id }, { width: 900, height: 710 })
      this.getList()
    },
    // 删除订单
    shanchu: function (id) {
      C.confirm('删除当前文章, 是否继续?', async () => {
        let res = await C.ajax('/shop/miniProgram/deleteArticle', { 'id': id }, 'post')
        if (res) {
          C.success(res.data)
          this.getList()
        }
      })
    },
    sizeChange: function (val) {
      this.page.limits = val
      this.getList()
    },
    currentChange: function (val) {
      this.page.pages = val
      this.getList()
    },
    getList: async function () {
      let url = '/shop/miniProgram/getArticleList'
      let data = await C.ajax(url, { filter: JSON.stringify(this.page) })
      if (data) {
        this.list = data.data
        this.total = data.count
      }
    }
  },
  mounted: function () {
    this.getList()
  }
}
</script>